/**
 * @author thordurorn
 */
$(document).ready(function() {
  
  
  /**
   * following functions set up the toolbar using jquery UI button
   */
  $(function() {
			
			$( "#btn-reset" ).button({
				text: false,
				icons: {
				primary: "ui-icon-trash"
				}
			});
			$( "#btn-save" ).button({
				text: false,
				icons: {
				primary: "ui-icon-disk"
				}
			});
			$( "#btn-undo" ).button({
				text: false,
				icons: {
					primary: "ui-icon-arrowthick-1-w"
				}
			});
			$( "#btn-redo" ).button({
				text: false,
				icons: {
				primary: "ui-icon-arrowthick-1-e"
				}
			})
				
			//grouping buttons in to sets
			$("#btnset-general").buttonset();
			//note that this also modifies the radio buttons 
			$("#btnset-shapes").buttonset();
			
			
			
		
		});
		
		/**
		* Returns an object representing whats selected on the toolbar. 
		* @return Object with the following properties: shape, width, color, fill
		*/
		UIgetToolSelection = function(){
			var obj = {
			     "shape": $('#btnset-shapes').children(":checked").val()
			    ,"width" : $('#ui-line-width').val()
				,"color": $('#ui-line-color').val()
				,"fill": $('#ui-fill-color').val()
			};
			return obj;				
		}
		/**
		 * 
		 *
		 * When selecting an object on the canvas you can use this to have the toolbar represent
		 * the objects properties. Supply the selected drawing obj and the toolbar gets set accordingly
		 * Can also supply a 'on the fly' object if it just has those properties.
		 * @param any object that has the following properties: shape, width, color , fill 
		 */
		UIsetToolSelection = function(obj){
				$('#btnset-shapes').children().each(function(index) {
				  $(this).removeClass('ui-state-focus');
				});
				$('#btnset-shapes').children("[value=" + obj.shape + "]").attr('checked', 'checked').addClass('ui-state-focus');
				$('#ui-line-width').val(obj.width);
				$('#ui-line-color').val(obj.color);
				$('#ui-fill-color').val(obj.fill);
		}
		
		
		 
});